import React from 'react'
import 'antd/dist/antd.css'
import './index.less'
import Title from './components/Title.jsx'
import Send from './components/Send.jsx'
export default class Welcome extends React.Component {
    constructor() {
        super()
        this.state = {
            tik: 5,
            tikspot:'',
            init: true,
            title: '欢迎来到就业可视化系统'
        }
        this.wordLoop = null
        this.timer = null
    }

    // 倒计时跳转
    tickToPush() {
            this.wordLoop = setInterval(() => {
            const len = this.state.tikspot.length
            if(len === 3) {
                this.setState({
                    tikspot: ''
                })
            } else {
                this.setState({
                    tikspot: this.state.tikspot + '.'
                })
            }
        }, 300)

            this.timer = setInterval(async () => {
            if(this.state.tik === 0) {
                this.clear()
                this.setState({
                    tik: 5
                })
                // this.props.history.push('/home/demand')
            } else {
                this.setState({
                    tik: this.state.tik - 1
                })
            }
        }, 1000)
    }

    // 跳转入系统
    goToSystem() {
         this.clear()
         this.props.history.push('/home/demand')
    }

    // 清除定时器
    clear() {
        this.wordLoop && clearInterval(this.wordLoop)
        this.timer && clearInterval(this.wordLoop)
    }

    // 初始化
    init() {
        // 从根目录进入的才计时
       this.props.location.state?.fromRoot && (this.tickToPush(), this.state.init = false)
    }

    componentDidMount() {
       this.init()
    }

    render() {
        const { tik, tikspot, init,  } = this.state
        return (
            <div className="container">
                <div className="cover"></div>
                <Send></Send>
                <h3 style={{display: init?'none':'block'}} className="tips">还有 {tik} 秒自动跳转{tikspot}</h3>
                    <div className="pushWrapper">
                        <div className="centerBox">
                            <img src="https://fecdn4.zhaopin.cn/landing_zhaopin_com/assets/register-logo.020d11.png" alt="123" />
                        </div>
                    <div onClick={() => this.goToSystem()} className="pushBtn">立即进入</div>
                </div>%0050
                <div className="rightBox"></div>
            </div>
        )
    }
}